<template>
	<view style="">
		<view class="loginbgs">
			<view class="logobg">
				<image class="logo" src="/static/logo.png" mode="widthFix"></image>

			</view>
			<view class="logo_slg">三源建设</view>
			<!-- 手机验证码登录 -->
			<view class="PhoneBox">
				<view class="tel_tile">重置密码</view>
				<view class="telInputBox matop20"><input class="telipt" type="safe-password" :value="inputValue0"
						placeholder="原始密码 " @input="onPwdInput0" /></view>
				<view class="telInputBox matop20"><input class="telipt" type="safe-password" :value="inputValue1"
						placeholder="新密码 " @input="onPwdInput1" /></view>
				<view class="telInputBox matop20"><input class="telipt" type="safe-password" :value="inputValue2"
						placeholder="再次输入新密码 " @input="onPwdInput2" /></view>
			</view>
			<view class="anniu matop50 tcent linh100" @click="ToLogin()">修改密码</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue0: '',
				inputValue1: '',
				inputValue2: '',
			};
		},
		methods: {
			onPwdInput0: function(event) {
				this.inputValue0 = event.target.value;
			},
			onPwdInput1: function(event) {
				this.inputValue1 = event.target.value;
			},
			onPwdInput2: function(event) {
				this.inputValue2 = event.target.value;
			},

			//登录
			ToLogin() {
				var user_id = uni.getStorageSync('user_id');
				if (this.inputValue2 != this.inputValue1) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return false;
				}
				this.ran
					.request('index/Login/usupdatepassword', {
						password: this.inputValue0,
						newpassword: this.inputValue1,
						user_id: user_id,
					})
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 1,
								})
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
		},
		onLoad(e) {
			if (!uni.getStorageSync('user_id')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		overflow-x: hidden;
		background: url('@/static/my_bg.png') no-repeat #fff;
		background-size: 750upx 450upx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.urls {
		text-align: center;
		line-height: 100upx;
		text-decoration: underline;
		color: #007aff;
	}

	.time60 {
		text-align: center;
		line-height: 100upx;
		color: #007aff;
	}

	.opcts {
		opacity: 0.5;
	}

	.tcent {
		text-align: center !important;
	}

	.linh100 {
		line-height: 100upx;
	}

	.matop20 {
		margin-top: 20upx !important;
	}

	.matop50 {
		margin-top: 50upx !important;
	}

	.mabtm50 {
		margin-bottom: 50upx !important;
	}

	.matop100 {
		margin-top: 100upx !important;
	}

	.matop200 {
		margin-top: 200upx !important;
	}


	.logocss {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		display: block;
	}



	.PhoneBox {
		padding: 20upx 50upx;
		overflow: hidden;
		margin: auto;

		.tel_tile {
			font-weight: bold;
			line-height: 100upx;
			font-size: 40upx;
		}


		.telInputBox {
			width: 650upx;
			overflow: hidden;
			background: #efefef;
			border-radius: 80upx;
			padding: 10upx 0;

			.add86 {
				width: 100upx;
				line-height: 80upx;
				float: left;
				text-align: center;
				box-sizing: border-box;
				border-right: 1upx solid #eee;
			}

			.telipt {
				width: 460upx;
				padding: 0 20upx;
				line-height: 80upx;
				height: 80upx;
				float: left;
			}
		}

	}

	.loginbgs {
		width: 100%;
		margin-top: 28%;

		.logobg {
			width: 200upx;
			height: 200upx;
			margin: 0 auto;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 180upx;
			box-sizing: border-box;
			box-shadow: 1px 2px 4px #999;

			.logo {
				width: 130upx;
				display: block;
				margin: 0 auto;
			}
		}

		.logo_slg {
			width: 200upx;
			margin: auto;
			text-align: center;
			line-height: 100upx;
			font-size: 34upx;
		}


	}





	.anniu:active {
		background: linear-gradient(90deg, #0e97ff, #0974c1);
	}

	.anniu {
		width: 650rpx;
		height: 106rpx;
		margin: 0 auto;
		border-radius: 60rpx;
		color: #ffffff;
		background: linear-gradient(90deg, #0e97ff, #0974c1);

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 16rpx;
		}

		view {
			font-size: 34upx;
		}
	}

	.login {
		width: 500rpx;
		height: 90rpx;
		background: #29c88e;
		border-radius: 45rpx;
		margin: 80rpx auto 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
	}

	.item {
		margin: 0 95rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #dbdbdb;
	}

	.item-l {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}
</style>